import client_bg from '@/assets/client_bg.jpeg'
import cabinet from '@/assets/server/cabinet.png'
import { notification } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
import '../views/cover.scss'

/**
 * 仿真界面背景
 */
export default defineComponent({
  setup(props, { emit, slots }) {
    // 放大缩小
    const zoom = ref(false)
    notification.warning({
      message: 'Operating prompt',
      description:
        'The host that needs to be operated on the mouse finger, and then click the "Start" button of the environment that needs to be activated in the pop-up box to enter the environment',
      duration: 2.5,
    })
    return () => (
      <>
        {/* 退出放大功能 */}
        <div
          class={[
            'absolute 2xl:w-20 2xl:h-20 w-15 h-15 bg-white rounded-full opacity-40 right-60.5 z-50 transition all ease-in-out duration-2000 transform',
            zoom.value ? 'top-30.5' : '-top-20',
          ]}
          onClick={() => {
            zoom.value = false
          }}
        >
          <span
            class='block 2xl:w-20 2xl:h-20 w-15 h-15 text-gray-300 iconify'
            data-icon='bi:x-circle'
            data-inline='false'
          />
        </div>
        <div
          id='cover'
          class='flex items-center justify-center w-full h-full'
          style={`background-image:url(${client_bg});background-size:100% 100%`}
        >
          <div class='relative flex w-full h-full space-x-4'>
            <div
              class={[
                ' w-388 h-402.5 absolute cabinet zoom transition all ease-in-out duration-1000 transform',
                zoom.value && 'scale-150 translate-y-129 -translate-x-150',
              ]}
              style={`background:url(${cabinet}); background-size:100% 100%;cursor:${
                zoom.value ? 'zoom-out' : 'zoom-in'
              }`}
              onDblclick={() => {
                zoom.value = !zoom.value
              }}
            >
              {slots.default && slots.default()}
            </div>
          </div>
        </div>
      </>
    )
  },
})
